<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">

<head>

    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

    <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
    <link th:href="@{/css/font-awesome.css}" rel="stylesheet"/>
    <link th:href="@{/css/plugins/bootstrap-table/bootstrap-table.min.css}" rel="stylesheet"/>
    <link th:href="@{/css/animate.css}" rel="stylesheet"/>
    <link th:href="@{/css/style.css}" rel="stylesheet"/>

</head>

<body>

<div class="col-sm-12">
    <!-- Example Events -->
    <div class="example-wrap">
        <div class="example">

            <form id="form" method="post" action="#">
                <div class="ibox-content">
                    <div class="row">
                        <div class="col-sm-5 m-b-xs">
                            <select id="choseselect" class="form-control input-s-lg inline">
                                <option value="0" th:text="${chselectName}"></option>
                            </select>
                        </div>

                        <div class="col-sm-3">
                            <div class="input-group" style="position: relative;left: 150%;">
                                <input type="text" id="selectbyname" maxlength="10" placeholder="请输入用户名关键字" class="input-sm form-control"/> <span
                                    class="input-group-btn">
                                        <input type="button"  class="btn btn-sm btn-primary" onclick="selectByName()" value="搜索"> </input> </span>
                            </div>
                        </div>

                    </div>
                    <hr/>
                    <table class="table table-striped">
                        <thead>
                        <tr>
                            <th><input type="checkbox" name="box"/></th>
                            <th>用户ID</th>
                            <th style="position:relative;transform:translateX(-10%);">用户名称</th>
                            <th style="position:relative;transform:translateX(-40%);">角色名称</th>
                            <th style="position:relative;transform:translateX(-15%);">用户所属部门</th>
                            <th style="position:relative;transform:translateX(-30%);">操作时间</th>
                        </tr>
                        </thead>
                    </table>
                    <div class="table-responsive pre-scrollable">
                        <table id="maintable" class="table table-striped" data-mobile-responsive="true">
                            <tbody>
                            <tr th:each="user,num:${userRoles}">
                                <td><input type="checkbox" name="boxid" th:text="${num.count}"/></td>
                                <td><a th:text="${user.cuserId}" onclick="chUserMsg(this)"></a></td>
                                <td th:text="${user.cuserName}"></td>
                                <td>
                                    <select class="form-control" name="roleselect"
                                            th:data-placeholder="${user.cuserRoleName}">
                                        <option value="0" th:text="${user.cuserRoleName}"></option>
                                    </select>
                                </td>
                                <td>
                                    <select class="form-control" name="deptselect">
                                        <option value="0" th:text="${user.cuserDeptName}"></option>
                                    </select>
                                </td>
                                <td th:text="${user.curserTime}"></td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="btn-group hidden-xs" id="exampleTableEventsToolbar" role="group">
                        <input type="button" class="btn btn-success"
                               style="margin: 10px; position: relative;left: 400%;" onclick="upload()" value="修改">
                        </input>
                        <input type="button" class="btn btn-danger"
                               style="margin: 10px; position: relative; left: 400%;" onclick="deleting()" value="删除">

                        </input>

                    </div>
                </div>
            </form>
        </div>
    </div>
    <!-- End Example Events -->
</div>
</body>
<!-- 全局js -->
<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/js/bootstrap.min.js}"></script>
<script th:src="@{/js/plugins/layer/layer.min.js}"></script>

<!-- 自定义js -->
<script th:src="@{/js/content.js}"></script>

<!-- Bootstrap table -->
<script th:src="@{/js/plugins/bootstrap-table/bootstrap-table.min.js}"></script>
<script th:src="@{/js/plugins/bootstrap-table/bootstrap-table-mobile.min.js}"></script>
<script th:src="@{/js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js}"></script>
<!-- Peity -->
<script th:src="@{/js/demo/systemjs.js}"></script>

<script th:inline="javascript">

    /* <![CDATA[ */
    var rolelist = [[${rolelist}]];
    var deptlist = [[${deptlist}]];
    var usrnum = [[${userRoles}]].length;

    for (var j = 0; j < usrnum; j++) {
        for (var i = 1; i <= rolelist.length; i++) {
            $("select[name='roleselect']").eq(j).append("<option></option>");
            $("select[name='roleselect']").eq(j).find("option").eq(i).attr("value", i);
            $("select[name='roleselect']").eq(j).find("option").eq(i).text(rolelist[i - 1].toString());
        }

        for (var i = 1; i <= deptlist.length; i++) {

            $("select[name='deptselect']").eq(j).append("<option></option>");
            $("select[name='deptselect']").eq(j).find("option").eq(i).attr("value", i);
            $("select[name='deptselect']").eq(j).find("option").eq(i).text(deptlist[i - 1].toString());
        }
    }

    for (var i = 1; i <= rolelist.length; i++) {
        $("#choseselect").append("<option></option>");
        $("#choseselect").find("option").eq(i).attr("value", i);
        $("#choseselect").find("option").eq(i).text(rolelist[i - 1].toString());
    }

    $("#choseselect").change(function () {
        var opt = $("#choseselect").val();

        if (opt != 0) {
            var rolename = $("#choseselect").find("option:selected").text();

            //layer.msg(rolename);
            $.ajax({
                type: "POST",
                url: "roleUser.shtml",
                async: false,
                data: {"rolename": rolename},
                datatype: "Json",
                success: function (data) {
                    //layer.msg(rolename);
                    location.reload();
                }
            });
        }

    });

    //修改用户密码
    function chUserMsg(obj) {
        //获取用户Id
        var id = $(obj).text();
        var name = $(obj).parent().next().text();

        $.ajax({
            type: "POST",
            url: "userUpdateView.shtml",
            async: false,
            data: {
                "userId": id,
                "userName": name
            },
            success: function (data) {
                layer.open({
                    type: 1,
                    title: '用户信息修改',
                    shadeClose: true,
                    shade: false,
                    area: ['800px', '500px']
                    , content: data
                });

            }
        })

    }

    //修改后的数据记录
    var changRoleNum = new Array();
    var changDeptNum = new Array();
    $("select[name='roleselect']").change(function () {
        var opt = $("select[name='roleselect']");
        for (var i = 0; i < opt.length; i++) {
            if (opt.eq(i).val() != 0) {
                if (changRoleNum.indexOf(i) == -1) {
                    changRoleNum.push(i);
                    $("select[name='roleselect']").eq(i).css("background-color", "#EEAEEE");
                }
            } else if (opt.eq(i).val() == 0) {
                //changRoleNum.splice($.inArray(i,arr),1);
                $("select[name='roleselect']").eq(i).css("background-color", "");
            }
        }
    });
    $("select[name='deptselect']").change(function () {

        var opt = $("select[name='deptselect']");
        for (var i = 0; i < opt.length; i++) {

            if (opt.eq(i).val() != 0) {
                if (changDeptNum.indexOf(i) == -1) {
                    changDeptNum.push(i);
                    $("select[name='deptselect']").eq(i).css("background-color", "#D8BFD8");
                }
            } else if (opt.eq(i).val() == 0) {
                //changDeptNum.splice($.inArray(i,arr),1);
                $("select[name='deptselect']").eq(i).css("background-color", "");
            }
        }

    });


    function deleting() {

        var id = $("input[type=checkbox]:checked");
        var ids = new Array();
        for (var i = 0; i < id.length; i++) {
            ids.push(id.eq(i).parent().next().find("a").text())
        }

        if (id.length <= 0) {
            layer.msg("请选中至少一条需要删除的用户数据");
        } else {
            layer.msg('删除是不可恢复的，你确定要删除这' + id.length + '条数据吗？', {
                time: 0 //不自动关闭
                , btn: ['确定', '取消']
                , yes: function (index) {
                    layer.close(index);
                    $.ajax({
                        url: "CuserDelete.shtml",
                        type: "POST",
                        data: {
                            "ids": ids,
                        },
                        traditional: true,
                        async: false,
                        success: function (data) {
                            layer.msg("删除成功");
                            location.reload();
                        }
                    })
                }
            });
        }

    }

    function upload() {


        $.merge(changRoleNum.sort(), changDeptNum.sort());
        changRoleNum = $.unique(changRoleNum.sort());
        if (changRoleNum.length == 0) {
            layer.msg("未做出修改动作");
            return;
        }
        var Udata1 = new Array();
        var Udata2 = new Array();
        var Udata3 = new Array();
        var Udate = [];

        for (var i = 0; i < changRoleNum.length; i++) {
            var j = changRoleNum[i];
            var tr = $("#maintable tbody").find("tr").eq(j);
            var id = tr.find("td").eq(1).text();
            var role = tr.find("td").eq(3).find("option:selected").text();
            var dept = tr.find("td").eq(4).find("option:selected").text();
            var arr = {"id": id, "role": role, "dept": dept};
            Udata1.push(id);
            Udata2.push(role);
            Udata3.push(dept);
            Udate.push(arr);
        }

        $.ajax({
            url: "CuserUpload.shtml",
            type: "POST",
            data: {
                "UdataId": Udata1,
                "UdataRole": Udata2,
                "UdataDept": Udata3,
            },
            traditional: true,
            async: false,
            success: function (data) {
                layer.msg("修改成功");
                setTimeout(function () {
                    location.reload();
                },1000)
            }
        })

    }

    function selectByName() {

        var selectname=$("#selectbyname").val();

        $.ajax({
            url: "CuserSelect.shtml",
            type: "POST",
            data: {
                "selectname": selectname,
            },
            traditional: true,
            async: false,
            success: function (data) {
                location.reload();
            }
        })
    }

    /* ]]> */
</script>

</html>